﻿<div ng-controller="HomeController">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-3 col-xs-5">
            <h3>Artists</h3>
            <div style="max-height:85vh; overflow-y: auto; overflow-x: no-content;">
                <div ng-repeat="a in artists">
                    <a ng-href="#/ArtistDetails/{{a.ArtistId}}">{{a.Name}}</a>
                    <a ng-href="#/ArtistDetails/{{a.ArtistId}}"><img ng-src="{{a.ImgUrl}}" class="img-responsive img-rounded" /></a>
                    <hr />
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-7 col-sm-7 col-xs-7">
            <h3>Events</h3>
            <div style="max-height:85vh; overflow-y: auto; overflow-x: no-content;">
                <div style="max-height:85vh; overflow-y: auto; overflow-x: no-content;">

                </div>

                <input ng-model="search" type="text" />

                <ul class="example-animate-container">
                    <li class="well" ng-repeat="e in events | filter:search as results">
                        <h3><a ng-href="#/EventDetails/{{e.Id}}">{{e.EventName}}</a></h3>
                        <a ng-href="#/EventDetails/{{e.Id}}"><img ng-src="{{e.EventPoster}}" class="img-responsive img-rounded" /></a>
                        <p><strong>Main Artist: </strong>{{e.FeaturedArtist}}</p>
                        <p><strong>Opening Artist: </strong>{{e.OpeningArtist}}</p>
                        {{e.Date | date:'mediumDate'}} &emsp; {{e.price | currency :"USD$"}}
                </li>
                    <li class="animate-repeat" ng-if="results.length == 0">
                        <strong>No results found...</strong>
                    </li>
                </ul>

                </div>
            </div>
        </div>
    </div>